<!DOCTYPE html> <html>
<head>
<title>Items</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<link href="/jscss/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
  <div class="container">
    <code>页面内JS切换选项卡，需调用ciy_tab()</code><br/>
    <code>动态交互页面使用选项卡，URL跳转切换，无需调用JS</code>
    <br/>
    <blockquote>默认风格 ciy-tab</blockquote>

    <br/>
    <div class="ciy-tab">
        <ul>
          <li>网站设置</li>
          <li>用户管理</li>
          <li>权限分配</li>
          <li>商品管理</li>
          <li>订单管理</li>
        </ul>
        <div>
          <div class="tabcont">内容1</div>
          <div class="tabcont">内容2</div>
          <div class="tabcont">内容3</div>
          <div class="tabcont">内容4</div>
          <div class="tabcont">内容5</div>
        </div>
    </div>
    <br/>

    <blockquote>卡片风格 ciy-tab ciy-tab-card</blockquote>
    自定选项卡
    <div class="ciy-tab ciy-tab-card">
        <ul>
          <li>网站设置</li>
          <li class="active">用户管理</li>
          <li>权限分配</li>
          <li>商品管理</li>
          <li>订单管理</li>
        </ul>
        <div class="ciy-tab-box">
          <div class="tabcont">内容1</div>
          <div class="tabcont">内容2</div>
          <div class="tabcont">内容3</div>
          <div class="tabcont">内容4</div>
          <div class="tabcont">内容5</div>
        </div>
    </div>
    <br/>

    <blockquote>简约风格 ciy-tab ciy-tab-simple</blockquote>
    <div class="ciy-tab ciy-tab-simple">
        <ul>
          <li>网站设置</li>
          <li>用户管理</li>
          <li class="active">权限分配</li>
          <li>商品管理</li>
          <li>订单管理</li>
        </ul>
        <div>
          <div class="tabcont">内容1</div>
          <div class="tabcont">内容2</div>
          <div class="tabcont">内容3</div>
          <div class="tabcont">内容4</div>
          <div class="tabcont">内容5</div>
        </div>
    </div>
  </div>
<script src="/jscss/jquery-1.12.4.min.js"></script>
<script src="/jscss/ciy.js"></script>
<script type="text/javascript">
'use strict';
$(function(){
    ciy_tab();
});
</script>
</body></html>